<template>
  <div class="demo" style="padding: 20px">
    <div id="splist" style=" border:solid 1px black;width: 600px;BACKGROUND-COLOR: rgba(248,248,248,1);
    padding: 20px;display: flex;flex-direction: column">
      <p style="text-align: center">{{mchName}}商品清单</p>
      <div style="border-top: dashed 1px black;width: 100%" ></div>
      <div>
        <div style="display: flex;justify-content: space-between;width: 350px">
          <p style="line-height: 0px">单号：{{printForm.sn}}</p>
          <p style="line-height: 0px">收银员：{{name}}</p>
        </div>
        <div style="display: flex;justify-content: space-between;width: 385px">
          <p style="line-height: 0px">日期：{{printForm.orderDate|dateFormatter}}</p>
        </div>
        <div style="display: flex;justify-content: space-between;width: 350px">
          <p style="line-height: 0px">会员卡号：{{printForm.memberMobile}}</p><p style="line-height: 0px">会员名：{{printForm.memberName}}</p>
        </div>
        <div style="border-top: dashed 1px black;width: 100%" ></div>
        <div>
          <div style="display: flex">
            <p  style="line-height: 0px;width: 250px">商品名称</p>
            <p style="line-height: 0px;width: 80px;text-align: center">数量</p>
            <p style="line-height: 0px;width: 100px;text-align: center">单价</p>
            <p style="line-height: 0px;width: 100px;text-align: center">金额</p>
          </div>
          <div style="display: flex" v-for="item in printForm.itemList">
            <p  style="line-height: 14px;width: 250px;padding-right: 5px">{{item.name}}</p>
            <p style="line-height: 0px;width: 80px;text-align: center">{{item.quantity}}</p>
            <p style="line-height: 0px;width: 100px;text-align: center">{{item.price}}</p>
            <p style="line-height: 0px;width: 100px;text-align: center">{{item.price}}</p>
          </div>
        </div>
        <div style="border-top: dashed 1px black;width: 100%" ></div>
        <div style="display: flex;width: 343px;justify-content: space-between">
          <p style="line-height: 0px;" v-if="false">合计数量：{{printForm.subQuantity}}</p>
          <p style="line-height: 0px;">应收金额：{{printForm.subPrice}}</p>
        </div>
        <div style="display: flex;width: 312px;justify-content: space-between">
          <p style="line-height: 0px;" v-if="printForm.discount>0">店铺优惠：{{printForm.discount}}</p>
          <p style="line-height: 0px;" v-if="printForm.freight>0">运费：{{printForm.freight}}</p>
        </div>
<!--        <div style="display: flex;width: 312px;justify-content: space-between">-->
<!--          <p style="line-height: 0px;">现金：6</p>-->
<!--          <p style="line-height: 0px;">水票：70</p>-->
<!--        </div>-->
<!--        <div style="display: flex;width: 312px;justify-content: space-between">-->
<!--          <p style="line-height: 0px;">转账：6</p>-->
<!--          <p style="line-height: 0px;">月结：70</p>-->
<!--        </div>-->
<!--        <div style="display: flex;width: 400px;justify-content: space-between">-->
<!--          <p style="line-height: 0px;">付款： 人民币现金  100</p>-->
<!--          <p style="line-height: 0px;">找零： 人民币现金  30</p>-->
<!--        </div>-->
        <p>备注：{{printForm.memo}}</p>
        <p style="line-height: 0px;margin-top: 30px;text-align: center" >
          谢谢惠顾，欢迎下次光临！
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import { getLodop,loadCLodop}  from '@/utils/lodop'
  import {list} from '@/api/product'
  import {find} from '@/api/member'
  import { mapGetters } from 'vuex'
  import {getInfo} from '@/api/sysMch'

  export default {
    name: 'index',
    created() {
      loadCLodop()
      this.loadMch()
    },
    data(){
      return{
          mchName:'',
      }
    },
    computed: {
      ...mapGetters([
        'employee', 'name'
      ])
    },
    props:['printForm'],
    methods:{
      loadMch(){
        getInfo().then(res=>{
            this.mchName=res.data.name
        })
      },
      printPdf(){
        // 查询数据
        let  LODOP = getLodop();
        console.log(LODOP)
        // LODOP.PRINT_INIT("订货单");
        // LODOP.PRINT_DESIGN()
        LODOP.SET_PRINT_STYLE("FontSize", 18);
        LODOP.SET_PRINT_STYLE("Bold", 1);
        // LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
        LODOP.SET_PRINT_PAGESIZE(1,57,0,'');
        console.log(LODOP.GET_VALUE("ProgramData",1))
        LODOP.ADD_PRINT_HTM(88, 200, 350, 600,
          document.getElementById("splist").innerHTML);
        console.log(LODOP)
        // LODOP.PRINT();
        LODOP.PREVIEW();

      },
    }
  }
</script>

<style scoped>

</style>
